<template>
  <div>
    <div @click="$props.clickPlay($props.id)">
      <span>{{ getNameById($props.id) }}</span>
      <svg
        viewBox="0 0 100 40"
        style="height: 1.2em; width: 1.2em; padding-top: 0.2em"
      >
        <rect
          x="10"
          y="10"
          width="80"
          height="55"
          fill="none"
          stroke="rgb(112, 212, 112)"
          stroke-width="6"
          rx="15"
        ></rect>
        <!-- dominant-baseline: middle; text-anchor: middle; -->
        <text fill="rgb(112, 212, 112)" x="25" y="50" style="font-size: 2em">
          HQ
        </text>
      </svg>
      <svg
        viewBox="0 0 100 40"
        style="height: 1.2em; width: 1.2em; padding-top: 0.2em"
      >
        <rect
          x="10"
          y="10"
          width="80"
          height="55"
          fill="none"
          stroke="rgb(248, 171, 37)"
          stroke-width="6"
          rx="15"
        ></rect>
        <!-- dominant-baseline: middle; text-anchor: middle; -->
        <text fill="rgb(248, 171, 37)" x="25" y="50" style="font-size: 2em">
          SQ
        </text>
      </svg>
      <svg
        viewBox="0 0 100 40"
        style="height: 1.2em; width: 1.2em; padding-top: 0.2em"
        v-show="songIsTrial($props.id)"
      >
        <rect
          x="10"
          y="10"
          width="80"
          height="55"
          fill="none"
          stroke="red"
          stroke-width="6"
          rx="15"
        ></rect>
        <!-- dominant-baseline: middle; text-anchor: middle; -->
        <text fill="red" x="17" y="50" style="font-size: 2em">
          <!--  -->
          试听
        </text>
      </svg>
      <span>&nbsp;-&nbsp;{{ getSingerById($props.id) }}</span>
      <svg
        viewBox="-20 -30 100 100"
        style="height: 1.2em; width: 1.2em; padding-top: 0.8em"
        v-show="$props.id == $store.state.playerState.playData.songId"
      >
        <line
          x1="25"
          y1="25"
          x2="25"
          y2="75"
          style="stroke: red; stroke-width: 4"
          fill="aqua"
        >
          <animate
            attributeName="y1"
            from="25"
            to="75"
            dur="0.5s"
            fill="freeze"
            id="toDown"
            begin="toUp.end"
          ></animate>
          <animate
            attributeName="y1"
            from="75"
            to="25"
            dur="0.5s"
            fill="freeze"
            id="toUp"
            begin="0;toDown.end"
          ></animate>
        </line>
        <line
          x1="40"
          y1="50"
          x2="40"
          y2="75"
          style="stroke: blue; stroke-width: 4"
          fill="aqua"
        >
          <animate
            attributeName="y1"
            from="25"
            to="75"
            dur="0.3s"
            fill="freeze"
            id="toDown"
            begin="toUp.end"
          ></animate>
          <animate
            attributeName="y1"
            from="75"
            to="25"
            dur="0.3s"
            fill="freeze"
            id="toUp"
            begin="0;toDown.end"
          ></animate>
        </line>
        <line
          x1="55"
          y1="25"
          x2="55"
          y2="75"
          style="stroke: gray; stroke-width: 4"
          fill="aqua"
        >
          <animate
            attributeName="y1"
            from="25"
            to="75"
            dur="0.6s"
            fill="freeze"
            id="toDown"
            begin="toUp.end"
          ></animate>
          <animate
            attributeName="y1"
            from="75"
            to="25"
            dur="0.6s"
            fill="freeze"
            id="toUp"
            begin="0;toDown.end"
          ></animate>
        </line>
        <line
          x1="70"
          y1="25"
          x2="70"
          y2="75"
          style="stroke: #660000; stroke-width: 4"
          fill="aqua"
        >
          <animate
            attributeName="y1"
            from="25"
            to="75"
            dur="0.2s"
            fill="freeze"
            id="toDown"
            begin="toUp.end"
          ></animate>
          <animate
            attributeName="y1"
            from="50"
            to="25"
            dur="0.4s"
            fill="freeze"
            id="toUp"
            begin="0;toDown.end"
          ></animate>
        </line>
      </svg>
    </div>
    <!-- 占位符啦 -->
    <div style="flex-grow: 1" @click="$props.clickPlay($props.id)"></div>

    <span @click="$props.removeClick($props.id)">
      <svg
        viewBox="0 0 100 100"
        style="height: 1.2em; width: 1.2em; padding-top: 0.8em"
      >
        <line
          x1="25"
          y1="25"
          x2="75"
          y2="75"
          style="stroke: gray; stroke-width: 4"
        />
        <line
          x1="75"
          y1="25"
          x2="25"
          y2="75"
          style="stroke: gray; stroke-width: 4"
        />
      </svg>
    </span>
  </div>
</template>

<script>
export default {
  name: "CloudMusicSongplaylistelement",
  props: {
    id: Number,
    clickPlay: { type: Function },
    removeClick: { type: Function },
  },
  data() {
    return {

    };
  },
  computed: {
    songInfo() {
      return this.$store.state.DataCacheMap.simpleData[this.$props.id];
    },
  },
  mounted() {},

  methods: {
    /**
     * 获取歌曲名称
     */
    getNameById() {
      return this.songInfo["title"];
    },
    /**
     * 获取歌手名称
     */
    getSingerById() {
      return this.songInfo["singer"];
    },
    /**
     * 判断歌曲是否收费
     */
    songIsTrial() {
      return this.songInfo && this.songInfo["fee"] && this.songInfo["fee"] == 1;
    },
  },
};
</script>